import React, { Component } from 'react';
import { Card, Button, List, Form, InputNumber, Col, Row, Input, Icon, Modal } from 'antd';
import { connect } from 'dva';
import { Stage, Layer, Text, Image } from 'react-konva';
import { formatMessage } from 'umi/locale';
import Light1ParamsForm from './hdForms/Light1ParamsForm';
import Light2ParamsForm from './hdForms/Light2ParamsForm';
import Light3ParamsForm from './hdForms/Light3ParamsForm';
import Light4ParamsForm from './hdForms/Light4ParamsForm';

@connect(({ fccc }) => ({ fccc }))
class FrontCutterCamCalImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };

  componentDidMount() {
    const image = new window.Image();
    image.src = this.props.fccc.frontCutterCamSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.fccc.frontCutterCamSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  render() {
    return <Image image={this.state.image} width={1200} height={880} />;
  }
}

@connect(({ fccc }) => ({ fccc }))
@Form.create({})
class CutterCameraCalibration extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    cutterCam1Pos1CalMm: '', // 铡刀标定的时候1号相机点1到铡刀的距离
    cutterCam1Pos2CalMm: '', // 铡刀标定的时候1号相机点2到铡刀的距离
    cutterCam2Pos1CalMm: '', // 铡刀标定的时候2号相机点1到铡刀的距离
    cutterCam2Pos2CalMm: '', // 铡刀标定的时候2号相机点2到铡刀的距离
    cutterDownDis: 0, // 铡刀下降的距离
  };

  cutterDown = e => {
    const { dispatch } = this.props;
    const { cutterDownDis } = this.state;
    dispatch({
      type: 'fccc/cutterDown',
      payload: cutterDownDis,
    });
  };

  checkLightPos1 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/closeCutterCalImageModalBig',
    });
    dispatch({
      type: 'fccc/checkLightPos',
      payload: 1,
    });
  };

  checkLightPos2 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/closeCutterCalImageModalBig',
    });
    dispatch({
      type: 'fccc/checkLightPos',
      payload: 2,
    });
  };

  checkLightPos3 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/closeCutterCalImageModalBig',
    });
    dispatch({
      type: 'fccc/checkLightPos',
      payload: 3,
    });
  };

  checkLightPos4 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/closeCutterCalImageModalBig',
    });
    dispatch({
      type: 'fccc/checkLightPos',
      payload: 4,
    });
  };

  closeCutterImageModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/closeCutterCalImageModalBig',
    });
  };

  calCutterCam1Pos1 = e => {
    const { dispatch } = this.props;
    const { cutterCam1Pos1CalMm } = this.state;
    dispatch({
      type: 'fccc/calCutterCam1',
      payload: [1, cutterCam1Pos1CalMm],
    });
  };

  calCutterCam1Pos2 = e => {
    const { dispatch } = this.props;
    const { cutterCam1Pos2CalMm } = this.state;
    dispatch({
      type: 'fccc/calCutterCam1',
      payload: [2, cutterCam1Pos2CalMm],
    });
  };

  calCutterCam2Pos1 = e => {
    const { dispatch } = this.props;
    const { cutterCam2Pos1CalMm } = this.state;
    dispatch({
      type: 'fccc/calCutterCam2',
      payload: [1, cutterCam2Pos1CalMm],
    });
  };

  calCutterCam2Pos2 = e => {
    const { dispatch } = this.props;
    const { cutterCam2Pos2CalMm } = this.state;
    dispatch({
      type: 'fccc/calCutterCam2',
      payload: [2, cutterCam2Pos2CalMm],
    });
  };

  verifyCutterCam1Cal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/verifyCutterCam1Cal',
    });
  };

  verifyCutterCam2Cal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/verifyCutterCam2Cal',
    });
  };

  verifyCutterCamTotal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/verifyCutterCamTotal',
    });
  };

  openCutterCamCalDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/openCutterCamCalDir',
    });
  };

  deleteTotalCutterCalImage = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/deleteTotalCutterCalImage',
    });
  };

  verifyCutterBeginCheck = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/verifyCutterBeginCheck',
    });
  };
  closeCutDoorAlarm = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/closeCutDoorAlarm',
    });
  };
  openCutDoorAlarm = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fccc/openCutDoorAlarm',
    });
  };

  render() {
    const {
      light1Params,
      light2Params,
      light3Params,
      light4Params,
      frontCutterCamSrc,
      cutterImageModalVisibleBig,
      hintInfo,
    } = this.props.fccc;

    const { getFieldDecorator, getFieldsValue } = this.props.form;
    return (
      <>
        <Card
          title={formatMessage({ id: 'app.tools.cam1Position' })}
          extra={[
            <span style={{ marginLeft: 30 }}>
              {
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  {formatMessage({ id: 'app.tools.BBladeDrop' })}.
                </font>
              }
            </span>,
            <span style={{ marginLeft: 20 }}>{formatMessage({ id: 'app.tools.DescentDistance' })}(mm)</span>,
            <Input
              onChange={e => this.setState({ cutterDownDis: e.target.value })}
              style={{ marginLeft: 10, width: 80 }}
            />,
            <Button style={{ marginLeft: 20, marginRight: 100 }} onClick={this.cutterDown}>
              {formatMessage({ id: 'app.tools.DropKnife' })}
            </Button>,
          ]}
        >
          <Row>
            <span>{<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.Point1Calibration' })}</font>}</span>
            <span style={{ marginLeft: 20 }}>{formatMessage({ id: 'app.tools.cutDistance' })}(mm)</span>
            <Input
              onChange={e => this.setState({ cutterCam1Pos1CalMm: e.target.value })}
              style={{ marginLeft: 10, width: 80 }}
            />
            <Button onClick={this.calCutterCam1Pos1} style={{ marginLeft: 10 }}>
              {formatMessage({ id: 'app.tools.StandardPoint1' })}
            </Button>

            <span style={{ marginLeft: 30 }}>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.Point2Calibration' })}</font>}
            </span>
            <span style={{ marginLeft: 20 }}>{formatMessage({ id: 'app.tools.cutDistance' })}(mm)</span>
            <Input
              onChange={e => this.setState({ cutterCam1Pos2CalMm: e.target.value })}
              style={{ marginLeft: 10, width: 80 }}
            />
            <Button onClick={this.calCutterCam1Pos2} style={{ marginLeft: 10 }}>
              {formatMessage({ id: 'app.tools.StandardPoint2' })}
            </Button>

            <Button onClick={this.verifyCutterCam1Cal} style={{ marginLeft: 20 }}>
              {formatMessage({ id: 'app.tools.Cam1Verification' })}
            </Button>
            <Button style={{ marginLeft: 20 }} onClick={this.openCutterCamCalDir}>
              {formatMessage({ id: 'app.tools.ViewPictureCut' })}
            </Button>
            <Button onClick={this.deleteTotalCutterCalImage} style={{ marginLeft: 20 }}>
              {formatMessage({ id: 'app.tools.DeletePicture' })}
            </Button>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <p>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.No.1TubeParameter' })}</font>}
              <Button style={{ marginLeft: 20 }} onClick={this.checkLightPos1}>
                {formatMessage({ id: 'app.tools.VerifyTube1' })}
              </Button>
            </p>
            <Light1ParamsForm light1Params={light1Params} />
          </Row>
          <Row style={{ marginTop: 10 }}>
            <p>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.No.2TubeParameter' })}</font>}
              <Button style={{ marginLeft: 20 }} onClick={this.checkLightPos2}>
                {formatMessage({ id: 'app.tools.VerifyTube2' })}
              </Button>
            </p>
            <Light2ParamsForm light2Params={light2Params} />
          </Row>
        </Card>
        <Card title={formatMessage({ id: 'app.tools.cam2Position' })}>
          <Row>
            <span>{<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.Point1Calibration' })}</font>}</span>
            <span style={{ marginLeft: 20 }}>{formatMessage({ id: 'app.tools.cutDistance' })}(mm)</span>
            <Input
              onChange={e => this.setState({ cutterCam2Pos1CalMm: e.target.value })}
              style={{ marginLeft: 10, width: 80 }}
            />
            <Button onClick={this.calCutterCam2Pos1} style={{ marginLeft: 10 }}>
              {formatMessage({ id: 'app.tools.StandardPoint1' })}
            </Button>

            <span style={{ marginLeft: 30 }}>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.Point2Calibration' })}</font>}
            </span>
            <span style={{ marginLeft: 20 }}>{formatMessage({ id: 'app.tools.cutDistance' })}(mm)</span>
            <Input
              onChange={e => this.setState({ cutterCam2Pos2CalMm: e.target.value })}
              style={{ marginLeft: 10, width: 80 }}
            />
            <Button onClick={this.calCutterCam2Pos2} style={{ marginLeft: 10 }}>
              {formatMessage({ id: 'app.tools.StandardPoint2' })}
            </Button>

            <Button onClick={this.verifyCutterCam2Cal} style={{ marginLeft: 20 }}>
              {formatMessage({ id: 'app.tools.Cam2Verification' })}
            </Button>
            <Button style={{ marginLeft: 20 }} onClick={this.openCutterCamCalDir}>
              {formatMessage({ id: 'app.tools.ViewPictureCut' })}
            </Button>
            <Button onClick={this.deleteTotalCutterCalImage} style={{ marginLeft: 20 }}>
              {formatMessage({ id: 'app.tools.DeletePicture' })}
            </Button>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <p>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.3TubeParameter' })}</font>}
              <Button style={{ marginLeft: 20 }} onClick={this.checkLightPos3}>
                {formatMessage({ id: 'app.tools.VerifyTube3' })}
              </Button>
            </p>
            <Light3ParamsForm light3Params={light3Params} />
          </Row>
          <Row style={{ marginTop: 10 }}>
            <p>
              {<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.4TubeParameter' })}</font>}
              <Button style={{ marginLeft: 20 }} onClick={this.checkLightPos4}>
                {formatMessage({ id: 'app.tools.VerifyTube4' })}
              </Button>
            </p>
            <Light4ParamsForm light4Params={light4Params} />
          </Row>
        </Card>
        <Card title={formatMessage({ id: 'app.tools.TotalLVerification' })}>
          <Row>
            <Button onClick={this.verifyCutterCamTotal}>{formatMessage({ id: 'app.tools.TotalLVerification' })}</Button>
            <Button onClick={this.verifyCutterBeginCheck} style={{ marginLeft: 20 }}>
              {formatMessage({ id: 'app.tools.VSPD' })}
            </Button>
            <Button style={{ marginLeft: 20 }} onClick={this.openCutterCamCalDir}>
              {formatMessage({ id: 'app.tools.ViewPictureCut' })}
            </Button>
            <Button onClick={this.deleteTotalCutterCalImage} style={{ marginLeft: 20 }}>
              {formatMessage({ id: 'app.tools.DeletePicture' })}
            </Button>
            <Button onClick={this.closeCutDoorAlarm} style={{ marginLeft: 20 }}>
              {formatMessage({ id: 'app.tools.CloseCutAlarm' })}
            </Button>
            <Button onClick={this.openCutDoorAlarm} style={{ marginLeft: 20 }}>
              {formatMessage({ id: 'app.tools.openCutAlarm' })}
            </Button>
          </Row>
        </Card>

        <Modal
          title={formatMessage({ id: 'app.tools.GuillotineShown' })}
          visible={cutterImageModalVisibleBig}
          width={window.screen.availWidth - 50}
          style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
          closable={true}
          footer={null}
          onCancel={this.closeCutterImageModal}
        >
          <Card>
            <Card.Grid style={{ width: '70%', textAlign: 'left' }}>
              <Stage width={1200} height={880}>
                <Layer>{frontCutterCamSrc ? <FrontCutterCamCalImage /> : <Image width={800} />}</Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '30%', textAlign: 'left' }}>
              <Row>
                <p>{<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.PromptMsg' })}: </font>}</p>
                <span>{hintInfo}</span>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.closeCutterImageModal}>{formatMessage({ id: 'app.tools.ConfirmOK' })}</Button>
                <Button onClick={this.closeCutterImageModal} style={{ marginLeft: 20 }}>
                  {formatMessage({ id: 'app.tools.recalibration' })}
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.openCutterCamCalDir}>
                  {formatMessage({ id: 'app.tools.ViewPictureCut' })}
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.deleteTotalCutterCalImage}>{formatMessage({ id: 'app.tools.DeletePicture' })}</Button>
              </Row>
            </Card.Grid>
          </Card>
        </Modal>
      </>
    );
  }
}
export default CutterCameraCalibration;
